<script></script>

<script setup>
import { toRefs } from 'vue'
import menuIcons from '@/components/Menu/src/components/menu-Icons.vue'

const props = defineProps({
  menuList: {
    type: Array,
    default: () => []
  }
})
const { menuList } = toRefs(props)
// const menuArr = JSON.parse(JSON.stringify(menuList.value.reverse()));
</script>

<template>
  <div>
    <template v-for="item in menuList" :key="item.name">
      <!-- 两个以上的子路由 -->
      <a-sub-menu v-if="item.children && item.children.length > 0" :key="`${item.name}`">
        <template #icon>
          <menuIcons :icon="item.meta.icon"></menuIcons>
        </template>
        <template #title>{{ item.meta.title }}</template>
        <MenuItem :menu-list="item.children"></MenuItem>
      </a-sub-menu>
      <!-- 只有一个子路由 -->
      <template v-else>
        <a-menu-item :key="item.name">
          <template #icon>
            <menuIcons :icon="item.meta.icon"></menuIcons>
          </template>
          {{ item.meta.title }}
        </a-menu-item>
      </template>
    </template>
  </div>
</template>

<style lang="less" scoped></style>
